<template>	
	<!--横向滑动banner-->
	<view>
		<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false">
      <view class="wrapper">
        <view v-for="(item, index) in info.list" :key="index" class="swiper-item" :style="'width: '+imgWidth+';height: '+imgHeight+';'" @click="clickItem(item)">
          <view class="image-wrapper round-20">
            <image :src="item.image" class="loaded round-20" mode="aspectFill" :style="'width: '+imgWidth+';height: '+imgHeight+';'"></image>
          </view>
        </view>
      </view>
    </scroll-view>
	</view>
</template>

<script>
export default {
	name: 'scroll-swiper',
	props: {
		info: {
			type: Object
		}
	},
	data(){
		return {
			imgWidth: '100%',
			imgHeight: '100px',
		}
	},
	created() {
		this.imgWidth = this.info.imgWidth
		this.imgHeight = this.info.imgHeight
	},
}
</script>

<style lang="scss">
  .wrapper {
  	display: flex;
    .swiper-item {
      display: inline-block;
      width: 600rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
  }
</style>